<template>
	<div class="app-container flex flex-row ">
		<div id="toDraggable" ref="toDraggable" class="w-full flex flex-wrap  basis-3/5 mr-5 drop-content">
			<div class=" box-content relative dpc-content"
				:style="'width:' + wrapSize.width + 'px;height:' + wrapSize.height + 'px;border:1px solid #ccc;'">
				<div class="drop-content">
					<div class="dpc-content">
						<div v-for="item in wrapSize.draggableData" :key="item.id">
							<div class="absolute text-white border-main cursor-pointer overflow-hidden flex justify-center items-center"
								:style="{
									fontSize: item.plugin_list && item.plugin_list.fontSizes ? item.plugin_list.fontSizes + 'px' : '',
									color: item.plugin_list && item.plugin_list.szColor ? item.plugin_list.szColor : '',
									borderRadius: item.plugin_list && item.plugin_list.circles ? item.plugin_list.circles + 'px' : '',
									border: item.plugin_list && item.plugin_list.borColor ? '1px solid' + item.plugin_list.borColor : '',
									background: item.plugin_list && item.plugin_list.bgColorName ? item.plugin_list.bgColorName : '#7dd3fc',
									width: item.width / ratio + 'px',
									height: item.height / ratio + 'px',
									left: item.left / ratio + 'px',
									top: item.top / ratio + 'px'
								}">
								<img v-if="item.plugin_list && item.plugin_list.pic" :src="item.plugin_list.pic"
									style="width: 100%;height: 100%;" />
								<span class="absolute">{{ item.plugin_list && item.plugin_list.name ?
									item.plugin_list.name : item.name }}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="w-full">
			<div class="inline-block ml-auto">
				<el-button @click="cancel">{{ $t('public.cancel')}}</el-button>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n' 
const { t: $t } = useI18n()
import { useRoute,useRouter } from "vue-router";
import { onMounted } from "vue";
const router = useRouter()
const route = useRoute()
const ratio = 1.3;
const wrapSize = reactive({
	width: 1920,
	height: 1080
})
let data = reactive({
	plugin_list: {}, // 编辑属性设置数据
	list: [], // 列表信息
	source: { // 筛选数据
		page: 1,
		pageNum: 15
	},
	total: 0, // 总条数
	currentData: {}  // 当前预览数据
})
let cancel=()=>{
	router.back()
}
onMounted(() => {
	const rowParams = JSON.parse(decodeURI(route.query.l as string)).info as {
		id: number,
		resolution: string
	}
	let editData = JSON.parse(rowParams.plugin_data)
	data.currentData = rowParams
	wrapSize.width = rowParams.width / ratio
	wrapSize.height = rowParams.height / ratio
	wrapSize.draggableData = editData
})
</script>
